<!--
 * @Author: 龙雨欢 932838577@qq.com
 * @Date: 2023-10-06 11:59:39
 * @LastEditors: 龙雨欢 932838577@qq.com
 * @LastEditTime: 2024-03-27 11:21:20
 * @FilePath: \sxyd-vue\src\components\nenghao\enterprises.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div id="profile">
      <div id="fileheader">
        <el-input v-model="serchName" placeholder="可输入文件名关键字搜索" style="width: 300px;" @change="changeName"></el-input>
        <el-button icon="el-icon-d-arrow-left" @click="goback">返回上级</el-button>
        <el-button icon="el-icon-upload" @click="addfilebefore">上传文件</el-button>
      </div>
      <div id="filetree">
        <el-tree :data="data" node-key="parent.id" ref="tree1" @node-click="handleCheckChange"
          :expand-on-click-node="false" :highlight-current="true">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span><i class="el-icon-folder-opened"></i> {{ data.label }}</span>
          </span>
        </el-tree>
      </div>
      <div id="fileright">
        <el-table :data="fileData" :header-cell-style="{ background: '#e3ecfb', color: 'black' }" height="100%"
          @row-dblclick="rowClick" style="width: 100%">
          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column prop="fileName" label="文件(夹)名称" align="center" width="450">
            <template v-slot="scope">
              <span v-if="scope.row.code" style="cursor: pointer;"><i class="el-icon-folder-opened"></i> {{ scope.row.catalogName
              }}</span>
              <span v-else><i class="el-icon-document"></i> {{ scope.row.fileName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="文件大小" align="center" width="120">
            <template v-slot="scope">
              <span v-if="scope.row.fileSize >= 1024">{{ (scope.row.fileSize / 1024).toFixed(2) }}M</span>
              <span v-else-if="scope.row.fileSize < 1024">{{ scope.row.fileSize }}KB</span>
            </template>
          </el-table-column>
          <el-table-column prop="fileType" label="文件标签" align="center" width="150">
            <template v-slot="scope">
              <span v-if="scope.row.code"><i class="el-icon-folder-opened"></i> 文件夹</span>
              <span v-else><i class="el-icon-document"></i> {{ scope.row.fileType }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="fileTag" label="文件发布时间" align="center" width="150">
          </el-table-column> -->
          <el-table-column prop="createName" label="上传人" align="center" width="150">
          </el-table-column>
          <el-table-column prop="createTime" label="上传时间" align="center" width="160">
            <template v-slot="scope">
              <span>{{ convertUTCTimeToLocalTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="scope">
              <el-tooltip effect="dark" content="下载" placement="top" :enterable="false">
                <el-button type="primary" icon="el-icon-download" size="mini" @click="download(scope.row)">预览</el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除文件" placement="top" :enterable="false">
                <el-button type="primary" icon="el-icon-delete" size="mini" @click="deletef(scope.row)">删除</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="上传文件" :visible.sync="dialogVisible" width="25%" :close-on-click-modal=false center
      :destroy-on-close="true">
      <el-form ref="form" label-width="160px">
        <el-form-item label="选择上传的文件">
          <el-upload ref="upload3" class="upload-demo" action="#" :on-preview="handlePreview" :on-remove="handleRemove"
            :on-change="filechange" :auto-upload="false" :file-list="fileList" multiple :limit="99">
            <el-button size="medium" type="goon" round>选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="goon" round @click="dialogVisible = false">取 消</el-button>
        <el-button size="medium" type="goon" round @click="addfile">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'enterprises',
  data() {
    return {
      serchName: '',
      data: [{
          id: 1,
          label: '兵团审批',
          children: [{
            id: 4,
            label: '规划环评报告及批复',
            children: [{
              id: 9,
              label: '草湖经济技术开发区总体规划（2021-2035年）环境影响报告书'
            }]
          },{
            id: 5,
            label: '建设项目环评报告及批复',
          }]
        },{
          id: 2,
          label: '师市审批',
          children: [{
            id: 21,
            label: '第一师阿拉尔市',
          },{
            id: 22,
            label: '第二师铁门关市',
          },{
            id: 23,
            label: '第三师图木舒克市',
          },{
            id: 24,
            label: '第四师可克达拉市',
          },{
            id: 25,
            label: '第五师双河市',
          },{
            id: 26,
            label: '第六师五家渠市',
          },{
            id: 27,
            label: '第七师胡杨河市',
          },{
            id: 28,
            label: '第八师石河子市',
          },{
            id: 29,
            label: '第九师白杨市',
          },{
            id: 221,
            label: '第十师北屯市',
          },{
            id: 222,
            label: '第十二师',
          },{
            id: 223,
            label: '第十三师新星市',
          },{
            id: 224,
            label: '第十四师昆玉市',
          }]
        }],
      catalogId: { id: 1 },
      fileData: [],
      fileList: [],
      dialogVisible: false,

    }
  },
  methods: {
    handleCheckChange(e) {
      // this.catalogId = e.parent
      // this.getFilesBycId()
    },
    async getFilesBycId() {
      // const { data: res } = await this.$http.get('/v1.0/resultIntegration/policyFile/findByCatalogId/' + this.catalogId)
      const { data: res } = await this.$http.get('/v1.0/resultIntegration/policyFile/findCatalogWithFileTreeByCatalogId?id=' + this.catalogId.id)
      this.fileData = []
      for (let i in res.data[0].children) {
        this.fileData.push(res.data[0].children[i].parent.fileCatalog)
      }
      for (let j in res.data[0].parent.filesList) {
        this.fileData.push(res.data[0].parent.filesList[j])
      }
      console.log(this.fileData)
    },
    async goback() {
      if(this.catalogId.upLevelId==0){
        return this.$message.error('已经是最上层结节！') 
      }
      const { data: res } = await this.$http.get('/v1.0/resultIntegration/policyFile/findCatalogWithFileTreeByCatalogId?id=' + this.catalogId.upLevelId)
      this.fileData = []
      for (let i in res.data[0].children) {
        this.fileData.push(res.data[0].children[i].parent.fileCatalog)
      }
      for (let j in res.data[0].parent.filesList) {
        this.fileData.push(res.data[0].parent.filesList[j])
      }
      this.catalogId = res.data[0].parent.fileCatalog
    },
    async rowClick(row, column) {
      console.log(row)
      if (row.code) {
        this.catalogId = row
        this.getFilesBycId()
      }
    },
    addfilebefore() {
      if (this.catalogId == '') {
        return this.$message.error('请先选择文件夹节点！')
      }
      this.fileList = []
      this.dialogVisible = true
    },
    handlePreview(file) {

    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    filechange(file, filelist) {
      console.log(file, filelist);
      this.fileList = filelist
    },
    async addfile() {
      var formData = new FormData();
      formData.append("catalogId", this.catalogId.id);
      for (let x in this.fileList) {
        formData.append("multipartFile", this.fileList[x].raw);
      }
      const { data: res } = await this.$http.post('/v1.0/resultIntegration/policyFile/save', formData)
      if (res.status != '9000') {
        return this.$message.error('添加文件失败！' + res.message)
      }
      this.$message.success('添加文件成功！')
      this.dialogVisible = false
      this.getFilesBycId()
    },
    download(row) {
      //window.open('https://10.226.77.11/fils/' + row.filePath);
      window.open('http://59.223.239.59:8803/' + row.filePath);
      
    },
    async changeName() {
      const { data: res } = await this.$http.get('/v1.0/resultIntegration/policyFile/findByName/' + this.serchName)
      this.fileData = res.data
    },
    async deletef(row) {
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => {
        return err
      });
      if (confirmResult !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        });
      }
      //请求
      const { data: res } = await this.$http.delete('/v1.0/resultIntegration/policyFile/delete/' + row.id)
      if (res.status != "4000") {
        return this.$message.error('删除文件失败！' + res.message)
      }
      this.$message.success('删除文件成功！');
      this.getFilesBycId()
    },
    convertUTCTimeToLocalTime(UTCDateString) {
      if (!UTCDateString) {
        return "-";
      }
      function formatFunc(str) {
        //格式化显示
        return str > 9 ? str : "0" + str;
      }
      const date2 = new Date(UTCDateString); //这步是关键
      const year = date2.getFullYear();
      const mon = formatFunc(date2.getMonth() + 1);
      const day = formatFunc(date2.getDate());
      const hour = date2.getHours();
      const min = formatFunc(date2.getMinutes());
      const miao = formatFunc(date2.getSeconds());
      const dateStr =
        year + "-" + mon + "-" + day + " " + hour + ":" + min + ":" + miao;
      return dateStr;
    }
  },
  async created() {
    // const { data: result1 } = await this.$http.get('/v1.0/resultIntegration/policyFile/findAll')
    // this.data = result1.data;
    // this.$nextTick().then(() => {
    //   const firstNode = document.querySelector('.el-tree-node')
    //   firstNode.click();
    // })

  }
}
</script>

<style scoped lang="less">
#profile {
  background-color: white;
  position: absolute;
  top: 80px;
  bottom: 0px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 8px #acc4fe;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#fileheader {
  width: 100%;
  height: 46px;
  padding-top: 5px;
  border-bottom: 1px solid #e3ecfb;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  justify-content: space-between;
}

#filetree {
  height: 91%;
  width: 20%;
  margin-top: 5px;
  margin-left: 10px;
}

#fileright {
  width: 79%;
  height: 91%;
  margin-top: 5px;
  border-left: 2px solid #e3ecfb;
}

/deep/ .el-tree {
  height: 100%;
  overflow: auto;

}

/deep/ .el-tree-node__content:hover {
  background-color: #e3ecfb;
}

/deep/ .el-tree-node.is-current>.el-tree-node__content {
  background-color: #e3ecfb !important;
}
</style>
